<template>
  <div class="hello">
    <ul>
      <li v-for="item in userList" :key="item.actor">{{item.actor}}</li>
    </ul>
    <p>地址: {{address.province}} {{address.city}} {{address.dist}}</p>
    <button @click="modify">修改</button>
   </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods : {
    modify() {
      // Vue.set this.$set 
      // this.$set(this.userList, 0, '周杰伦')
      // this.$set(this.address, 'dist', '江夏区');
      // this.address.dist = '江夏区'

      this.$set(this.userList, 0 , {actor:'周杰伦'})


    }
  },
  data:() => {
    return {
      userList: [
        {actor: '王力宏'},
        {actor: '刘德华'},
        {actor: '张学友'},
      ],
      address: {
        province:'湖北',
        city:'武汉'
      }
    }
  }
}
</script>